<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="ruleForm"
  >
    <el-form-item label="用户名" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="pass">
      <el-input
        type="password"
        v-model="ruleForm.pass"
      ></el-input>
    </el-form-item>

  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass"></el-input>
  </el-form-item>

     <el-form-item>


    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item> 
  </el-form>
</template>
<script>


// const qs = require('qs');  //node 语法 
import  qs  from 'qs'


export default {
  data() {
   
    var checkPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    var checkName = (rule, value, callback) => {
      //   rule验证规则   value 当前的值   callback  回调函数
      if (value === "") {
        callback(new Error("请输入用户名"));
      }

      if (value.length < 3) {
        alert("用户名不能小于3位");
        return;
      }

      callback()  //如果没有问题 callback() 必须要执行
    };

    return {
      ruleForm: {
        pass: "",
        checkPass: "",
        //   age: ''
        name: "",
      },
      rules: {

        //   trigger  表示这个函数什么场景下触发      blur 失去焦点的时候触发   触发自定义的函数  validatePass
        pass: [{ validator: checkPwd, trigger: "blur" , type: 'string' ,required: true}],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        name: [{ validator: checkName, trigger: "blur" }],
      },
    };
  },


  created(){
    //    this.$axios.get("/api/users?name=333&pwd=11").then(res=>{
    //       console.log(res)
    //   })



  },


  
  methods: {
    submitForm(formName) {

        // validate  element-ui 提供的验证的方法 名字不能改  只能用原生dom去操作
      this.$refs[formName].validate((valid) => {
        if (valid) {

       /*
         调用调取获取登录请求接口 
         
        1  验证      用户名 +密码 
        2  验证成功后  发送请求       返回数据里面还有token 值 
        3  把返回的token 值存储到本地缓存  
        4  配置请求拦截      后续每个请求都带上token (先从本地缓存里面获取 如果没有表示用户
        退出过或者之前没有登录 那么进行路由拦截   提示用户需要先登录  

        如果有那么正常进行后续的一系列操作  (增删改查)
        )   
       
       */


     alert("submit!");

     
let data={userName:this.ruleForm.name,
        password:this.ruleForm.pass}
   

    this.$axios.post('http://ludir.cn/api/react-project-api/index.php/admin/logins',  qs.stringify(data)
    ).then(res=>{
        console.log(res.data)

         //成功后 1  存储token  
                //  2 跳转到admin/home 首页
        localStorage.setItem("Token",res.data.subjects.token) //本来是字符串不需要转换
        this.$router.push('/home')

    })

     


         
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 重置 
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="css" scoped>
  .ruleForm {
      width :600px;
      height :400px;
      margin :100px auto;
  }
</style>